<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <script src="${path}/static/js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="${path}/static/css/style.css">
    <script src="${path}/static/js/script.js"></script>

</head>
<body>
<div class="container">
    <header>
        <h1>用户管理</h1>
        <jsp:include page="inc/inc.jsp"></jsp:include>
    </header>
    <main>
        <form id="searchForm">
            <label for="searchName">姓名：</label>
            <input type="text" id="searchName" placeholder="输入姓名">
            <label for="searchPhone">手机号：</label>
            <input type="text" id="searchPhone" placeholder="输入手机号">
            <input type="text" id="searchEmail" placeholder="邮箱">
            <input type="button" value="搜索" onclick="searchRunners()">
            <input type="button" value="刷新" onclick="{
                    window.location.href='${path}/manage/userList';}">
        </form>
<table>
    <tr>
        <th>用户名</th>
        <th>手机号</th>
        <th>邮箱</th>
        <th>余额</th>
        <th>注册时间</th>
        <th>最后登录时间</th>
        <th>上次修改时间</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${requestScope.userList}" var="userlist">
      <Tr>
          <td>${userlist.username}</td>
          <td>${userlist.phone_number}</td>
          <td>${userlist.email}</td>
          <td>${userlist.wallet}</td>
          <td><fmt:formatDate value="${userlist.createdAt}" pattern="yyyy-MM-dd"></fmt:formatDate></td>
          <td><fmt:formatDate value="${userlist.lastLoginTime}" pattern="yyyy-MM-dd"></fmt:formatDate></td>
          <td><fmt:formatDate value="${userlist.updatedAt}" pattern="yyyy-MM-dd"></fmt:formatDate> </td>
          <td>${userlist.enable?"正常":"冻结"}</td>
          <td><c:if test="${!userlist.enable}"><a href="${path}/manage/banUser?id=${userlist.id}&status=true"+>解除冻结</a></c:if><c:if test="${userlist.enable}"><a href="${path}/manage/banUser?id=${userlist.id}&status=false">冻结</a></c:if></td>
      </Tr>
    </c:forEach>
</table>
    </main>
</div>
<script>
    function searchRunners() {
        var searchName = $('#searchName').val();
        var searchPhone = $('#searchPhone').val();
        var searchEmail = $('#searchEmail').val();
        if (!searchName &&!searchPhone &&!searchEmail) {
            alert('姓名、手机号和邮箱不能都为空，请重新输入。');
            return;
        }
        $.ajax({
            url: '${path}/manage/searchUser',
            type: 'GET',
            data: {
                name: searchName,
                phone: searchPhone,
                email: searchEmail
            },
            dataType: 'json',
            success: function (response) {
                // 清空原有的表格内容
                $('table tr:gt(0)').remove();
                if (response.userList && response.userList.length > 0) {
                    $.each(response.userList, function (index, user) {
                        var createdAt = new Date(user.createdAt);
                        user.createdAt = createdAt.getFullYear() + '-' + ('0' + (createdAt.getMonth() + 1)).slice(-2) + '-' + ('0' + createdAt.getDate()).slice(-2);

                        var lastLoginTime = new Date(user.lastLoginTime);
                        user.lastLoginTime = lastLoginTime.getFullYear() + '-' + ('0' + (lastLoginTime.getMonth() + 1)).slice(-2) + '-' + ('0' + lastLoginTime.getDate()).slice(-2);

                        var updatedAt = new Date(user.updatedAt);
                        user.updatedAt = updatedAt.getFullYear() + '-' + ('0' + (updatedAt.getMonth() + 1)).slice(-2) + '-' + ('0' + updatedAt.getDate()).slice(-2);

                        var row = '<tr>' +
                            '<td>' + user.username + '</td>' +
                            '<td>' + user.phone_number + '</td>' +
                            '<td>' + user.email + '</td>' +
                            '<td>' + user.wallet + '</td>' +
                            '<td>'+user.createdAt+'</td>' +
                            '<td>'+user.lastLoginTime+'</td>' +
                            '<td>'+user.updatedAt+' </td>' +
                            '<td>' + (user.enable?"正常":"冻结") + '</td>' +
                            '<td>';
                        if (!user.enable) {
                            row += '<a href="${path}/manage/banUser?id=' + user.id + '&status=true">解除冻结</a>';
                        } else {
                            row += '<a href="${path}/manage/banUser?id=' + user.id + '&status=false">冻结</a>';
                        }
                        row += '</td></tr>';
                        $('table').append(row);
                    });
                } else {
                    $('table').append('<tr><td colspan="9">没有符合条件的用户信息。</td></tr>');
                }
            },
        });
    }
</script>
</script>
</body>
</html>
